<template>
  <a-dropdown placement="bottomRight">
    <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
      <!--        <a-menu-item v-if="menu" key="center" @click="handleToCenter">-->
      <!--          <a-icon type="user" />-->
      <!--          个人中心-->
      <!--        </a-menu-item>-->
      <!--        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">-->
      <!--          <a-icon type="setting" />-->
      <!--          个人设置-->
      <!--        </a-menu-item>-->
      <!--        <a-menu-divider v-if="menu" />-->
      <a-menu-item key="logout" @click="handleLogout">
        <a-icon type="logout"/>
        退出登录
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import {Modal} from 'ant-design-vue'
import {mapGetters} from 'vuex'

export default {
  name: 'AvatarDropdown',
  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },
  props: {
    currentUser: {
      type: Object,
      default: () => null
    },
    menu: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleToCenter () {
      this.$router.push('/system/station')
    },
    handleToSettings () {
      this.$router.push('/account/user')
    },
    handleLogout (e) {
      Modal.confirm({
        title: this.$t('提示'),
        content: this.$t('确定退出登录吗?'),
        onOk: () => {
          // return new Promise((resolve, reject) => {
          //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
          // }).catch(() => console.log('Oops errors!'))
          return this.$store.dispatch('Logout').then(() => {
            window.location.href = '/'
            // this.$router.push({ name: 'login' })
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
  /deep/ .action {
    margin-right: 8px;
  }

  /deep/ .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
</style>
